<template>
  <div style="width:100%">
    <div class="top_modelMoney">
      <div style="display:flex;align-items:center;font-size:14px">
        <div style="height:30px;line-height:30px;margin-right:10px;">账户余额：</div>
        <div
          style="width:60px;height:30px;background:rgb(70, 190, 138);color:#fff;text-align:center;line-height:30px;"
        >￥40.0</div>
      </div>
      <el-button type="primary" size="small">账户充值</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%lmargin-top:10px">
      <el-table-column prop="date" label="时间" width="180"></el-table-column>
      <el-table-column prop="name" label="金额" width="180"></el-table-column>
      <el-table-column prop="address" label="账户余额"></el-table-column>
      <el-table-column prop="address" label="事由"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "10元",
          address: "购买xxxx商品"
        },
        {
          date: "2016-05-02",
          name: "10元",
          address: "购买xxxx商品"
        },
        {
          date: "2016-05-02",
          name: "10元",
          address: "购买xxxx商品"
        },
        {
          date: "2016-05-02",
          name: "10元",
          address: "购买xxxx商品"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.top_modelMoney {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>